<template>
  <div class="ai-intelligent-assistant-config">
    <img class="logo" :src="openInfo.qrCodeUrl || aiqiyong" />
    <div v-if="!openInfo.qrCodeUrl" class="info-no-open">
      <span class="info-no-open-title">暂未开启AI智能助手， 是否立即启用？</span>
      <div class="info-no-open-button">
        <a-button type="primary" @click="open = true">一键启用</a-button>
      </div>
    </div>
    <div v-else class="info">
      <h3>智能助手体验及管理</h3>
      <div class="info-content">
        <span>1、可使用微信扫码进入智能助手体验，管理员可登录进行管理；</span>
        <span>2、可前往【终端】-【小程序管理】，将智能助手配置到小程序首页；</span>
      </div>
    </div>
    <a-modal
      v-model="open"
      title="启用AI智能助手"
      @ok="handleOk"
      class="agreement-modal"
      ok-text="确认启用"
      cancel-text="取消"
      :confirmLoading="loading"
    >
      <a-form-model ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="智能助手名称" prop="name">
          <a-input v-model:value="form.name" placeholder="请输入智能助手名称" />
        </a-form-model-item>
        <a-form-model-item label="智能助手简介" prop="description">
          <a-input v-model:value="form.description" placeholder="请输入智能助手简介" />
        </a-form-model-item>
        <a-form-model-item label=" " :colon="false" prop="agree">
          <a-checkbox :checked="form.agree" @click="handleClickAgreement">
            <span>我已阅读并同意</span>
          </a-checkbox>
          <span style="color: #1890ff; cursor: pointer" @click="handleAgreementOpen">《数据授权协议》</span>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal v-model="agreementOpen" width="800px" title="数据授权协议">
      <AuthorizationAgreement @read-complete="handleReadComplete" />
      <template slot="footer">
        <a-button type="primary" @click="agreementOpen = false" :disabled="!readComplete">同意</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { getOpenInfo, openSaasAI } from '@/api/ai/aiIntelligentAssistantConfig'
import AuthorizationAgreement from './components/AuthorizationAgreement.vue'
// 引入图片
import aiqiyong from '@/assets/aiqiyong.png'
export default {
  name: 'AiIntelligentAssistantConfig',
  components: {
    AuthorizationAgreement
  },
  data() {
    return {
      aiqiyong,
      readComplete: false,
      open: false,
      agreementOpen: false,
      openInfo: {},
      loading: false,
      form: {
        name: '',
        description: '',
        agree: false
      },
      rules: {
        name: [{ required: true, message: '请输入智能助手名称' }],
        description: [{ required: true, message: '请输入智能助手简介' }],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请同意数据授权协议'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  mounted() {
    this.queryOpenInfo()
  },
  methods: {
    handleClickAgreement() {
      if (this.form.agree) {
        this.form.agree = false
      } else if (this.readComplete) {
        this.form.agree = true
      }
    },
    handleReadComplete(readComplete) {
      if (readComplete) {
        this.readComplete = true
      }
    },
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await openSaasAI(this.form)
            this.open = false
            this.$message.success('启用成功')
            this.queryOpenInfo()
          } catch (error) {
            this.$message.error('启用失败')
          } finally {
            this.loading = false
          }
        }
      })
    },

    handleAgreementOpen() {
      this.agreementOpen = true
      this.form.agree = true
    },
    async queryOpenInfo() {
      const res = await getOpenInfo()
      this.openInfo = res.data || {}
    }
  }
}
</script>

<style lang="less" scoped>
.ai-intelligent-assistant-config {
  padding: 40px 0;
  display: flex;
  gap: 24px;
  .logo {
    width: 160px;
    height: 160px;
  }
  .info-no-open {
    .info-no-open-title {
      font-size: 24px;
      font-weight: 600;
    }
    .info-no-open-button {
      margin-top: 40px;
    }
  }
  .info {
    h3 {
      font-size: 24px;
      font-weight: 600;
    }
    .info-content {
      margin-top: 40px;
      span {
        display: block;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
</style>
